<template>
  <div>
    <button @click="updateVirtual">
      {{ useVirtualScroll ? "不" : "" }}使用虚拟滚动
    </button>
    <Table
      v-if="updated"
      :addon-renders="addonRenders"
      class="table"
      :columns="columns"
      :table-data="data.list"
      :selection.sync="selection"
      :virtual-options="{
        use: useVirtualScroll,
      }"
    ></Table>
  </div>
</template>
<script>
import Table from "vue-table/vue2";
import mockjs from "mockjs";
import "element-ui/packages/theme-chalk/src/index.scss";
import RowExpand from "./components/rowExpand.vue";
export default {
  data() {
    /**@type {import("vue-table/vue2").Column[]} */
    let columns = [
      {
        type: "checkbox",
        prop: "checkbox",
        fixed: "left",
      },
      {
        label: "左侧固定列",
        prop: "fixed-left",
        fixed: "left",
        template: ({ rowIndex }) => rowIndex + 1,
      },
      {
        label: "左侧固定列2",
        prop: "fixed-left-2",
        fixed: "left",
        template: ({ rowIndex }) => rowIndex + 1,
      },
    ];
    let mockBase = {
      "id|+1": 1,
    };
    for (let i = 0; i < 40; i++) {
      columns.push({
        label: "字段" + i,
        prop: "prop" + i,
        width: "120px",
        template: ({ row }) => {
          return (
            <input
              class="el-input__inner"
              v-model_lazy={row["prop" + i]}
            ></input>
          );
        },
      });
      mockBase["prop" + i] = "21";
    }
    columns.push(
      {
        label: "右侧固定列",
        prop: "fixed-right",
        fixed: "right",
        template: ({ rowIndex }) => rowIndex + 1,
      },
      {
        label: "右侧固定列2",
        prop: "fixed-right2",
        fixed: "right",
        template: ({ rowIndex }) => rowIndex + 1,
      },
      {
        label: "切换",
        type: "expand",
        prop: "c",
        fixed: "left",
        width: 100,
      },
    );
    /**@type {{list:any[]}} */
    let data = mockjs.mock({
      "list|100": [mockBase],
    });
    return {
      columns,
      data,
      /**@type {import("vue-table/vue2".AddonRenders)} */
      addonRenders: {
        expandRender: ({ row }) => {
          console.log("触发");
          return <RowExpand>内容{JSON.stringify(row)}</RowExpand>;
        },
      },
      selection: [],
      useVirtualScroll: false,
      updated: true,
    };
  },
  components: {
    Table,
  },
  methods: {
    updateVirtual() {
      this.useVirtualScroll = !this.useVirtualScroll;
      this.updated = false;
      this.$nextTick(() => {
        this.updated = true;
      });
    },
  },
};
</script>
<style scoped>
.table {
  width: 1000px;
  height: 500px;
  margin: 0 auto;
  margin-top: 50px;
}
.el-input__inner {
  height: 32px;
  line-height: 32px;
}
</style>
